<#import '/ftlLibrary/properteisVariable.ftl' as pv/>
<link href="assets/css/bootstrap-select.css" rel="stylesheet"/>
<link href="assets/css/front/listCommonStyle.css" rel="stylesheet"/>
<link href="assets/css/modify.css" rel="stylesheet"/>
<script src="assets/js/select2/select2.js"></script>
<style>
    th, td {
        border-right: 1px solid #ccc !important;
    }

    td:nth-last-child(1) {
        border-right: none !important;
    }

    th:nth-last-child(1) {
        border-right: none !important;
    }

    #tssClassesListtableScrollable tr:nth-child(odd) {
        background-color: #fff !important;
    }

    #tssClassesListtableScrollable tr:nth-child(even) {
        background-color: #F2F6F9 !important;
    }

    #tssClassesListtableScrollable .classTd {
        width: 80px !important;
    }

    #tssClassesListtableScrollable td {
        padding: 0px !important;
    }

    #tssClassesListtableScrollable .classTh {
        width: 80px;
    }

    #tssClassesListtableScrollable label {
        margin: 0px !important;
    }

    #tssClassesListtableScrollable tr {
        height: 200px;
        padding: 0px !important;
    }

    #tssClassesListtableScrollable tr:nth-child(1) {
        height: 40px !important;
    }

    #tssClassesListtableScrollable .classTd:nth-child(3n) {
        background-color: #6ACCFF;
    }

    #tssClassesListtableScrollable .classTd:nth-child(3n-1) {
        background-color: #F888BD;
    }

    #tssClassesListtableScrollable .classTd:nth-child(3n-2) {
        background-color: #84DAC3;
    }

    p {
        color: #fff;
        width: 80px !important;
        margin-bottom: 0px !important;
        white-space: normal !important;
        line-height: 20px !important;
    }
    .classTd{
        height: 200px;
        padding:10px 0;
    }
    .remarkDiv {
        position: absolute;
        top: 55px;
        right: -140px;
        width: 160px;
        min-height: 100px;
        display: block;
        background-color: #fff;
        white-space: normal;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 1.42857143;
        text-decoration: none;
        text-shadow: none;
        text-transform: none;
        letter-spacing: normal;
        word-break: normal;
        word-spacing: normal;
        word-wrap: normal;
        white-space: normal;
        background-color: #fff;
        -webkit-background-clip: padding-box;
        background-clip: padding-box;
        border: 1px solid #ccc;
        border: 1px solid rgba(0, 0, 0, .2);
        border-radius: 6px;
        -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
        line-break: auto;
        overflow: hidden;
    }

    .bootbox-expand-button {
        width: 19px;
        height: 19px;
        border: none;
        cursor: pointer;
        -webkit-appearance: none;
        float: right;
        top: 10px;
        right: 10px;
        position: relative;
        background: #E9F5FF url("assets/img/nav-img/icon_window.png") no-repeat 0 0;
    }

    .tableLeftDiv {
        width: 200px;
        position: absolute;
        left: 0;
        top: 0;
        border-right:1px solid #ccc;
    }
    .left-top-div:before {
        content: "";
        position: absolute;
        width: 1px;
        height: 215px;
        top: -1px;
        left: -9px;
        background-color: #d6d9df;
        display: block;
        transform: rotate(-75deg);
        transform-origin: top;
        -ms-transform: rotate(-75deg);
        -ms-transform-origin: top;
    }
    .left-top-div:after {
        content: "";
        position: absolute;
        width: 1px;
        height: 140px;
        top: 1px;
        left: 0;
        background-color: #d6d9df;
        display: block;
        transform: rotate(-45deg);
        transform-origin: top;
        -ms-transform: rotate(-45deg);
        -ms-transform-origin: top;
    }
    .title1{
        position: absolute;
        top: 10px;
        right:33px;
    }
    .title2{
        position: absolute;
        top: 56px;
        right:63px;
    }
    .title3{
        position: absolute;
        top: 65px;
        left:13px;
    }
    .tableLeft-middle-div{
        height: 600px;
    }
    .left-middle-1, .left-middle-2, .left-middle-3{
        height: 200px;
        font-size: 24px;
        text-align: center;
        line-height: 200px;
    }
    .left-middle-1{
        background-color: #F2F6F9;
    }
    .left-middle-2{
        background-color: #fff;
    }
    .left-middle-3{
        background-color: #F2F6F9;
    }
</style>

<div class="row margin-left-10">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="widget flat margin-top-0" style="margin: -10px 0 0px 0!important;">
            <div class="widget-header bordered-sky theme-bordered nopadding">
                <div class="widget-buttons widget-label nomargin-bottom">
                    <label class="businessBtns">
                        <ol class="breadcrumb" style="margin: 0;">
                            <li style="color: #809fa6;">班级管理</li>
                            <li class="active" style="color: #23a8f5;">园所课表</li>
                        </ol>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div style="margin-bottom: 50px;clear: both;">
            <div class="widget flat margin-top-0" style="margin: 3px 0 0px 0!important;float: left">
                <div class="widget-header bordered-sky theme-bordered nopadding">
                    <div class="widget-buttons widget-label nomargin-bottom">
                        <label class="businessBtns">
                            <a type="btn" class="btn basicInfoBtnt"
                               href="javascript:toView('viewTssClassScheduleController/viewTssClassSchedule.do?type=1',true,'POST',{pageSize:10})"
                               style="border: none;border-top-left-radius: 4px!important;border-bottom-left-radius: 4px!important;width: 120px;color: #4a647d;margin-right: 0!important;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">
                                亲子课表
                            </a><a type="btn" class="btn basicInfoBtnt"
                                   href="javascript:toView('viewTssClassScheduleController/viewTssClassSchedule.do?type=2',true,'POST',{pageSize:10})"
                                   style="background-color: #23a8f5;border: none;border-top-right-radius: 4px!important;border-bottom-right-radius: 4px!important;width: 120px;color: #fff;box-shadow:0px 0px 10px rgba(122,161,184,0.3);">过渡课表
                        </a>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="widget flat searchCriteria" style="margin: 0;">
            <div class="widget-header bordered-sky theme-bordered nopadding">
                <div class="widget-buttons " style="margin-bottom: 10px !important;">
                    <label class="businessBtns ">
                        <label>
                            <label style="width: 70px">课程日期：</label>
                        </label>
                        <label class="margin-right-20">
                            <input type="text"
                                   style="height: 30px;width:130px;border-radius: 4px!important;border: 1px solid #c6d5d8;padding-left:10px;"
                                   class=" date-picker tssClassScheduleInput" placeholder="请选择搜索日期"
                                   onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd'})">
                        </label>
                        <label>
                            <a style="border-radius: 0px;border: none;background: #ffab01 !important;"
                               class="btn btn-warning shiny" onclick="searchTime()"><i
                                    class="fa fa-search"></i>搜索
                            </a>
                        </label>
                        <label>
                            <a style="border-radius: 0px;border: none;background: #23a8f5 !important;margin-right: 20px !important;"
                               class="btn btn-blue shiny" id="last-week">前一周
                            </a>
                        </label>
                        <label>
                            <a style="border-radius: 0px;border: none;background: #23a8f5 !important;margin-right: 20px !important;"
                               class="btn btn-blue shiny" id="next-week">后一周
                            </a>
                        </label>
                    </label>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
             style="height: 40px;background-color: #e5f4ff;line-height: 40px">
            <div class="text-align-center" style="font-size: 15px;position: relative">
                <strong class="margin-right-10">课程表</strong><strong id="tssClassScheduleTime"
                                                                    class="margin-right-10"></strong><strong
                    id="tssClassScheduleDay"></strong>

                <span class="bootbox-expand-button" onclick="showBig()"></span>
            </div>
        </div>
        <div class="widget flat radius-bordered" style="margin-top: 0;box-shadow:0px 0px 10px rgba(122,161,184,0.3)">
            <div class="widget-body no-padding">
                <div class="table-scrollable" style="border: none;padding-left: 200px;position: relative">
                    <div class="tableLeftDiv">
                        <div class="left-top-div" style="height: 100px;background-color: #fff;color:#3a3949;">
                            <span class="title1">星期</span><br><span class="title2">班级</span><br><span class="title3">时间</span>
                        </div>
                        <div class="tableLeft-middle-div">
                            <div class="left-middle-1" >
                                全天
                            </div>
                            <div class="left-middle-2" >
                                上午
                            </div>
                            <div class="left-middle-3" >
                                下午
                            </div>
                        </div>
                    </div>
                    <!-- 数据表列信息列表 -->
                    <table class="table table-hover  dataTable newtable">
                        <thead>
                        <tr style="background-color: #F2F6F9;!important;height: 60px;!important;">
                            <th title="星期一">星期一<br><span class="appendTimeSpan"></span>
                            </th>
                            <th title="星期二">星期二<br><span class="appendTimeSpan"></span></th>
                            <th title="星期三">星期三<br><span class="appendTimeSpan"></span></th>
                            <th title="星期四">星期四<br><span class="appendTimeSpan"></span></th>
                            <th title="星期五">星期五<br><span class="appendTimeSpan"></span></th>
                            <th title="星期六">星期六<br><span class="appendTimeSpan"></span></th>
                            <th title="星期日">星期日<br><span class="appendTimeSpan"></span></th>
                        </tr>
                        </thead>
                        <tbody id="tssClassesListtableScrollable">
                        <tr>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                            <td>
                                <label class="classTh">class1</label><label class="classTh">class2</label><label
                                    class="classTh">class3</label>
                            </td>
                        </tr>
                        <tr>
                            <td style="position: relative">
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>过渡班A</p>
                                    <p>入园过渡课Ⅰ</p>
                                    <p>(12人)</p>
                                    <p>2-5岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">

                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="position: relative">
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                    <p>过渡班A</p>
                                    <p>入园过渡课Ⅰ</p>
                                    <p>(12人)</p>
                                    <p>2-5岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">

                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                        </tr>
                        <tr>
                            <td style="position: relative">
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                    <p>过渡班A</p>
                                    <p>入园过渡课Ⅰ</p>
                                    <p>(12人)</p>
                                    <p>2-5岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td >
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">
                                    <p>9:00</p>
                                    <p style="padding-right: 5px;padding-left: 5px">萌宝口才秀口才修</p>
                                    <p>(15人)</p>
                                    <p>2-3岁</p>
                                    <p>花花老师</p>
                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                            <td>
                                <label>
                                    <label class=" classTd">
                                    </label><label class=" classTd">

                                </label><label class=" classTd">
                                </label>
                                </label>
                            </td>
                        </tr>
                        <#list page_bean.list as data>
                        </#list>
                        </tbody>
                    </table>
                </div>
                ${pagingBar}
            </div>
        </div>
    </div>
</div>
<script>
    $(".selectpicker").select2();

    //    上一周 下一周

    //    日期搜索
    function searchTime() {
        var dateVal = new Date($(".tssClassScheduleInput").val());
        if (dateVal) {
            week(dateVal);
        } else {
            alert("请选择搜索日期")
        }
    }


    //    获取搜索日期当前一周日期
    function week(dateVal) {
        var currentFirstDate;
        var formatDate = function (date) {
            var obj = {};
            var year = date.getFullYear();
            var month = (date.getMonth() + 1);
            var day = date.getDate();
            var week = ['0', '1', '2', '3', '4', '5', '6'][date.getDay()];
            var key = year + '-' + month + '-' + day;
            var value = week;
            obj.time = key;
            obj.week = value;
            return obj;
        };
        var addDate = function (date, n) {
            date.setDate(date.getDate() + n);
            return date;
        };
        var setDate = function (date) {
            var dateValArr = [];
            var week = date.getDay() - 1;
            date = addDate(date, week * -1);
            currentFirstDate = new Date(date);
            for (var i = 0; i < 7; i++) {
                dateValArr.push(formatDate(i == 0 ? date : addDate(date, 1)))
            }
            console.log(dateValArr);
            var html = '(' + dateValArr[0].time.split("-")[1] + '.' + dateValArr[0].time.split("-")[2] + '-' + dateValArr[6].time.split("-")[1] + '.' + dateValArr[6].time.split("-")[2] + ')';
            $("#tssClassScheduleDay").empty().append(html);
            var timeHtml = dateValArr[0].time.split("-")[0] + '年' + dateValArr[0].time.split("-")[1] + '月';
            $("#tssClassScheduleTime").empty().append(timeHtml);
            for (var i = 0; i < dateValArr.length; i++) {
                var dateValArrItem = dateValArr[i].time;
                var html = dateValArrItem.split("-")[0] + '/' + dateValArrItem.split("-")[1] + '/' + dateValArrItem.split("-")[2];
                $(".appendTimeSpan").eq(i).empty().append(html)
            }
        };
        document.getElementById('last-week').onclick = function () {
            setDate(addDate(currentFirstDate, -7));

        };
        document.getElementById('next-week').onclick = function () {
            setDate(addDate(currentFirstDate, 7));
        };
        setDate(dateVal);
    }

    setTimeout(function () {
        $(".classTd").each(function () {
            var size = $(this).find("p").size();
            if (size == 0) {
                $(this).css("background-color", "transparent");
            }
        })

    }, 200)

    //    备注
    function iconchangeRemark(that) {
        if ($(that).attr("value") == 0) {
            $(that).attr("value", "1");
            $(that).next().removeClass("hidden");

        } else {
            $(that).attr("value", "0");
            $(that).next().addClass("hidden");
        }
    }

    //    全屏
    function showBig() {
        ajaxRequest("tssClassesController/getClassChangeById.do", {
            pageSise: 10,
        }, function (html) {
            getTopWin().bootbox.dialog({
                message: html,
                title: "班级变动",
                className: 'myDialog tssClassScheduleTableDialog',
            });
            $(".modal-header").find(".bootbox-close-button").removeClass("close");
            $(".modal-header").find(".bootbox-close-button").html("");
        }, function () {
            ajaxError("加载页面失败!")
        }, "post", "html")
    }


</script>